<script setup>
import Up from "@/components/canteen/mall/MallUp.vue";
import Adminbar from "@/components/canteen/mall/Mallbar.vue";
import Content from "@/components/Content.vue";
</script>

<template>
  <div class="bg">
    <div class="container">
      <!-- 将 Adminbar 组件放在最左边，并且让它在所有行中显示 -->
      <adminbar class="adminbar" style="background-color: #444444"></adminbar>
      <!-- 将 Up 和 Content 组件放在一个单独的 el-row 中，上下分布显示在最右边 -->
      <el-row class="main-content">
        <el-col :span="24" >
          <el-row style="height: 60px; background-color: white;">
            <el-col :span="24">
              <up></up>
            </el-col>
          </el-row>
          <el-row style="height: 720px; background-color: white;">
            <el-col :span="24" style="height: 750px" class="el-col-立体">
              <content></content>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
html, body, .bg {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex; /* 使用 flexbox 布局 */
}
.adminbar {
  width: 180px; /* 根据需要调整宽度 */
  background-color: aliceblue;
  height: 770px; /* 让 adminbar 占满整个视口高度 */
  margin-right: auto; /* 将 adminbar 推到最左边 */
}
.main-content {
  flex-grow: 1; /* 让主内容区域占据剩余空间 */
  display: flex;
  flex-direction: column; /* 将 Up 和 Content 组件设置为上下分布 */

}



</style>